<template>
  <div class="nav-header">
    <i class="fold-menu" :class="isFold ? 'el-icon-s-unfold' : 'el-icon-s-fold'" @click="handleFoldClick"></i>
    <div class="container">
      <div>
        <Breadcrumb :breadcrumbs="breadcrumbs" />
      </div>
      <UserInfo />
    </div>
  </div>
</template>

<script setup lang="ts">
import { useStore } from '@/store'
import { ref, defineEmits, defineExpose, computed } from 'vue'
import UserInfo from './UserInfo.vue'
import { useRoute } from 'vue-router'
import { Menu } from '@/service/login/type'
import { mapPathToBreadcrumb } from '@/utils/mapMenus'
import Breadcrumb from '@/base-ui/breadcrumb'
import { IBreadcrumb } from '@/base-ui/breadcrumb/types'

const emit = defineEmits<{
  (e: 'foldChange', isFold: boolean): void
}>()
// const emit = defineEmits(['foldChange'])

const isFold = ref<boolean>(false)
const handleFoldClick = () => {
  isFold.value = !isFold.value
  emit('foldChange', isFold.value)
}

const store = useStore()
const userMenus = computed<Menu[]>(() => store.state.login.userMenus)

const breadcrumbs = computed<IBreadcrumb[]>(() => {
  const route = useRoute()
  return mapPathToBreadcrumb(userMenus.value, route.path)
})

defineExpose({
  handleFoldClick
})
</script>

<style scoped lang="less">
.nav-header {
  display: flex;
  width: 100%;
  .fold-menu {
    font-size: 30px;
    cursor: pointer;
  }
  .container {
    display: flex;
    flex: 1;
    justify-content: space-between;
    align-items: center;
    padding-left: 20px;
  }
}
</style>
